<template>
    <view class="setInfoClass">
        <Navbar title="修改信息"> </Navbar>
        <van-form @submit="submitInfoForm">
            <view class="p-20rpx">
                <view class="w-full box">
                    <van-field
                        v-model="nickName"
                        clearable
                        required
                        label="用户昵称"
                        placeholder="请输入用户昵称"
                        :rules="[{ required: true, message: '请输入用户昵称' }]"
                    />
                    <van-field
                        v-model="phonenumber"
                        clearable
                        required
                        label="手机号码"
                        placeholder="请输入手机号码"
                        :rules="[
                            { required: true, message: '请输入手机号码' },
                            {
                                validator: () => {
                                    return phoneValidateFn(phonenumber)
                                },
                                message: '请输入正确的手机号码',
                            },
                        ]"
                    />
                    <van-field
                        v-model="email"
                        clearable
                        required
                        label="电子邮箱"
                        placeholder="请输入电子邮箱"
                        :rules="[
                            { required: true, message: '请输入电子邮箱' },
                            {
                                validator: () => {
                                    return validateEmail(email)
                                },
                                message: '请输入正确的电子邮箱',
                            },
                        ]"
                    />
                    <van-cell>
                        <template #title>
                            <view class="f-c">
                                <span class="pl-6rpx pr-75rpx">用户性别</span>
                                <van-radio-group
                                    v-model="sex"
                                    direction="horizontal"
                                >
                                    <van-radio name="0" icon-size="16px"
                                        >男</van-radio
                                    >
                                    <van-radio name="1" icon-size="16px"
                                        >女</van-radio
                                    >
                                </van-radio-group>
                            </view>
                        </template>
                    </van-cell>
                </view>
            </view>
            <view
                class="w-full box-border p-20rpx f-c-c position-fixed left-0 bottom-0"
            >
                <van-button
                    class="w-full text-hex-FFFFFF b-rd-6rpx f-c-c text-28rpx"
                    color="#55AFFE"
                    native-type="submit"
                >
                    提交
                </van-button>
            </view>
        </van-form>
    </view>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { setProfileApi } from '@/api/login.js'
export default defineComponent({
    props: {},
    setup(props, { emit }) {
        const state = reactive({
            nickName: '',
            email: '',
            phonenumber: '',
            sex: '0',
        })
        const methods = {
            /* 手机验证 */
            phoneValidateFn(value) {
                const phoneRegex = /^1[3-9]\d{9}$/
                return phoneRegex.test(value)
            },
            /* 验证邮箱 */
            validateEmail(input) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
                return emailRegex.test(input)
            },
            /* 提交修改个人信息表单 */
            submitInfoForm() {
                uni.showToast({
                    title: '数据处理中请稍后!',
                    icon: 'none',
                })
                let form = {
                    nickName: state.nickName,
                    email: state.email,
                    phonenumber: state.phonenumber,
                    sex: state.sex,
                }
                apis.setProfile(form).then((res) => {
                    uni.$success('用户信息更新成功！')
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1000)
                })
            },
        }
        const apis = {
            /* 获取登录人信息 */
            setProfile(data) {
                return new Promise((resolve, reject) => {
                    setProfileApi(data).then((res) => {
                        if (res.code == 200) {
                            resolve(res)
                        }
                    })
                })
            },
        }
        const computeds = {}
        onLoad((options) => {
            if (options) {
                let paramCode = JSON.parse(options.profileObj)
                state.nickName = paramCode.data.nickName
                state.phonenumber = paramCode.data.phonenumber
                state.email = paramCode.data.email
                state.sex = paramCode.data.sex
            }
        })
        onMounted(() => {})
        return {
            ...apis,
            ...toRefs(state),
            ...methods,
            ...computeds,
        }
    },
})
</script>
<style lang="less" scoped></style>
